<template>
  <div class="primary-info">
    <div class="row">
      <div class="empty-box">
        <div class="img-box">
          <el-image v-if="params.archivesUrl" :preview-src-list="[`${BASE_API}system/archives/download/${params.archivesUrl}`]" class="person-img" :src="`${BASE_API}system/archives/download/${params.archivesUrl}`"/>
          <img v-else class="person-img" src="@/assets/images/people.svg"/>
        </div>
      </div>
      <b-cell label="人员姓名" :content="params.name" />
      <b-cell label="身份证号" :content="params.idNumber || '--' " />
    </div>
    <div class="row">
      <div class="empty-box"></div>
      <b-cell label="性别" :content="params.genderName || '--' " />
      <b-cell label="入职日期" :content="params.entryDate || '--' " />
    </div>
    <div class="row">
      <b-cell label="所属部门" :content="params.workDepartment || '--' " />
      <b-cell label="工种类别	" :content="params.workTypeCategoryName || '--' " />
      <b-cell label="职务" :content="params.workType || '--' " />
    </div>
    <div class="row">
      <b-cell label="工种" :content="params.workType || '--' " />
      <b-cell label="手机号码" :content="params.contactPhone || '--' " />
      <b-cell label="下井时长" :content="params.inTimeStr || '--' " />
    </div>
  </div>
</template>
<script setup lang="ts">
import BCell from '@/components/b-cell.vue'

const BASE_API = import.meta.env.VITE_APP_BASE_URL

defineProps({
  params: {
    type: Object,
    default: () => ({})
  }
})
</script>
<style scoped lang="scss">
.primary-info {
  position: relative;
  .empty-box {
    position: relative;
    display: flex;
    
    flex: 1;
    min-width: 150px;
  }
  .row {
    position: relative;
    display: flex;
    gap: calc(16px * var(--scale));
    margin-top: calc(16px * var(--scale));
  }
  .img-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    text-align: center;
    .person-img {
      height: calc(2.2em * 2 + calc(16px * var(--scale)));
      background: var(--bg-color-overlay);
      padding: 10px 14px;
    }
  }
}
</style>
